<!--
 * @Author: chunlai
 * @Date: 2023-12-12 15:29:39
 * @LastEditTime: 2024-09-25 15:29:18
 * @LastEditors: minsheng_insurance_agency_zhoucl
 * @FilePath: \01.latest-short-insure\src\components\FileReadingPop.vue
 * @Description: 文件阅读弹出框(pdf+link+html)
-->
<template>
  <van-popup v-model="show" overlay-class="lay1_shark" position="bottom" round>
    <div class="common_pop_main">
      <div class="pop_head_line">
        {{ fileObj.fileName }}
        <div class="back_btn" @click="closePop">
          <img :src="`${imgUrlPath}/icons/close.png`" alt="" />
        </div>
      </div>
      <div class="pop_conts_box">
        <template v-if="fileObj.suffixType == 'pdf'">
          <div id="demoPdf" v-if="fileObj.suffixType == 'pdf'"></div>
        </template>
        <div class="frameWrapper" v-else-if="fileObj.suffixType == 'link'">
          <iframe
            :src="`${fileObj.fileUrl}`"
            scrolling="yes"
            id="ifr"
            width="100%"
            height="100%"
          ></iframe>
        </div>
        <div class="htmlWrapper" v-else-if="fileObj.suffixType == 'html'">
          <div v-html="fileObj.fileUrl"></div>
        </div>
      </div>
      <div class="pop_foot_btns is_one">
        <div class="one_btn" @click="closePop">{{ btnText }}</div>
      </div>
    </div>
  </van-popup>
</template>

<script>
import { pdfJs } from "@/utils/pdfh5";
export default {
  name: "FileReadingPop",
  props: {
    btnText: {
      type: String,
      default: () => "我已知晓",
    },
  },
  components: {},
  data() {
    return {
      show: false,
      pdfh5: null,
      fileObj: {},
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    initModule(file) {
      this.fileObj = file;
      this.show = true;
      if (this.fileObj.suffixType == "pdf") {
        let that = this;
        if (window.Pdfh5) {
          return that.initPlugPdf();
        }
        pdfJs(function (res) {
          that.initPlugPdf();
        });
      }
    },
    initPlugPdf() {
      this.$nextTick(() => {
        this.pdfh5 = new Pdfh5("#demoPdf", {
          pdfurl: this.fileObj.fileUrl,
        });
        let that = this;
        // 监听完成事件
        this.pdfh5.on("complete", function (status, msg, time) {
          that.pdfPageNum = this.totalNum;
        });
      });
    },
    closePop() {
      this.pdfh5 = null;
      this.show = false;
      this.$emit("close");
    },
  },
};
</script>
<style lang="less" scoped>
.frameWrapper {
  width: 100%;
  height: 100%;
  overflow: scroll;
  iframe {
    width: 100%;
    height: 100%;
    border: none;
  }
}
.htmlWrapper {
  padding: 0 12px;
}
</style>
